<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<meta name="description" content="Everest Admin Panel" />
		<meta name="keywords" content="Admin, Dashboard, Bootstrap3, Sass, transform, CSS3, HTML5, Web design, UI Design, Responsive Dashboard, Responsive Admin, Admin Theme, Best Admin UI, Bootstrap Theme, Wrapbootstrap, Bootstrap" />
		<meta name="author" content="Bootstrap Gallery" />
		<link rel="shortcut icon" href="img/favicon.ico">
		<title>sugonTravle</title>

		<!-- Bootstrap CSS -->
		<link href="css/bootstrap.css" rel="stylesheet" media="screen">

		<!-- Animate CSS -->
		<link href="css/animate.css" rel="stylesheet" media="screen">

		<!-- Alertify CSS -->
		<link href="css/alertify/alertify.core.css" rel="stylesheet">
		<link href="css/alertify/alertify.default.css" rel="stylesheet">

		<!-- Main CSS -->
		<link href="css/main.css" rel="stylesheet" media="screen">

		<!-- Font Awesome -->
        <link href="fonts/font-awesome.min.css" rel="stylesheet">

        <link href="css/jquery.dataTables.min.css" rel="stylesheet">

        <!-- <link href="css/transfer.css" rel="stylesheet"> -->

		<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
			<script src="js/html5shiv.js"></script>
			<script src="js/respond.min.js"></script>
        <![endif]-->

        <style>
            .table>tbody>tr>td{
                text-align:center;
            }
            .table>thead>tr>th{
                text-align:center;
            }
            .dropdown ul {
                width: 450px;
            }
            .dropdown-menu li {
                width: 220px; /*如果显示三列 则width改为70px*/
                float: left;
                display: block;
            }
            .route-li {
                width: 25%
            }
        </style>

	</head>

	<body>

		<!-- Header Start -->
		<header>

			<!-- Logo starts -->
			<div class="logo">
				<a href="#">
					<img src="img/logo.png" alt="logo">
					<span class="menu-toggle hidden-xs">
						<i class="fa fa-bars"></i>
					</span>
				</a>
			</div>
			<!-- Logo ends -->

			<!-- Custom Search Starts -->
			<div class="custom-search pull-left hidden-xs hidden-sm">
				<input type="text" class="search-query" placeholder="Search here">
				<i class="fa fa-search"></i>
			</div>
			<!-- Custom Search Ends -->

			<!-- Mini right nav starts -->
			<div class="pull-right">
				<ul id="mini-nav" class="clearfix">
					<li class="list-box hidden-lg hidden-md hidden-sm" id="mob-nav">
						<a href="#">
							<i class="fa fa-reorder"></i>
						</a>
					</li>
					<li class="list-box dropdown hidden-xs">
						<a id="drop7" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-image"></i>
						</a>
						<span class="info-label info-bg animated rubberBand">7+</span>
						<ul class="blog-gallery dropdown-menu fadeInDown animated clearfix recent-tweets">
							<li>
								<img src="img/user1.jpg" alt="User">
							</li>
							<li>
								<img src="img/user2.jpg" alt="User">
							</li>
							<li>
								<img src="img/user3.jpg" alt="User">
							</li>
							<li>
								<img src="img/user4.jpg" alt="User">
							</li>
							<li>
								<img src="img/user5.jpg" alt="User">
							</li>
							<li>
								<img src="img/user6.jpg" alt="User">
							</li>
							<li>
								<img src="img/user7.jpg" alt="User">
							</li>
							<li>
								<img src="img/user8.jpg" alt="User">
							</li>
							<li>
								<img src="img/user9.jpg" alt="User">
							</li>
							<li>
								<img src="img/user3.jpg" alt="User">
							</li>
						</ul>
					</li>
					<li class="list-box dropdown hidden-xs">
						<a id="drop5" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-th"></i>
						</a>
						<span class="info-label success-bg animated rubberBand">6</span>
						<ul class="dropdown-menu fadeInDown animated quick-actions">
							<li class="plain">Recently Viewed</li>
							<li>
								<a href="profile.html">
									<i class="fa fa-user text-info"></i>
									<p>Users</p>
								</a>
							</li>
							<li>
								<a href="login.html">
									<i class="fa fa-tasks text-warning"></i>
									<p>Tasks</p>
								</a>
							</li>
							<li>
								<a href="typography.html">
									<i class="fa fa-font text-danger"></i>
									<p>Fonts</p>
								</a>
							</li>
							<li>
								<a href="graphs.html">
									<i class="fa fa-globe text-success"></i>
									<p>Graphs</p>
								</a>
							</li>
							<li>
								<a href="graphs.html">
									<i class="fa fa-bank text-danger"></i>
									<p>Home</p>
								</a>
							</li>
							<li>
								<a href="invoice.html">
									<i class="fa fa-file-text text-success"></i>
									<p>Invoice</p>
								</a>
							</li>
						</ul>
					</li>
					<li class="list-box dropdown hidden-xs">
						<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-bell"></i>
						</a>
						<span class="info-label danger-bg animated rubberBand">4</span>
						<ul class="dropdown-menu bounceIn animated messages">
							<li class="plain">
								Messages
							</li>
							<li>
								<div class="user-pic">
									<img src="img/user4.jpg" alt="User">
								</div>
								<div class="details">
									<strong class="text-danger">Wilson</strong>
									<span>Uploaded 28 new files yesterday.</span>
								</div>
							</li>
							<li>
								<div class="user-pic">
									<img src="img/user1.jpg" alt="User">
								</div>
								<div class="details">
									<strong class="text-danger">Adams</strong>
									<span>Got 12 new messages.</span>
								</div>
							</li>
							<li>
								<div class="user-pic">
									<img src="img/user3.jpg" alt="User">
								</div>
								<div class="details">
									<strong class="text-info">Sam</strong>
									<span>Uploaded new project files today.</span>
								</div>
							</li>
							<li>
								<div class="user-pic">
									<img src="img/user5.jpg" alt="User">
								</div>
								<div class="details">
									<strong class="text-info">Jennifer</strong>
									<span>128 new purchases last 3 hours.</span>
								</div>
							</li>
						</ul>
					</li>
					<li class="list-box user-profile hidden-xs">
						<a href="login.html" class="user-avtar animated rubberBand">
							<img src="img/user4.jpg" alt="user avatar">
						</a>
					</li>
				</ul>
			</div>
			<!-- Mini right nav ends -->

		</header>
		<!-- Header ends -->

		<!-- Left sidebar starts -->
		<aside id="sidebar">

			<!-- Current User Starts -->
			<div class="current-user">
				<div class="user-avatar animated rubberBand">
					<img src="img/user4.jpg" alt="Current User">
					<span class="busy"></span>
				</div>
				<div class="user-name">Welcome Mr. Lu</div>
				<ul class="user-links">
					<li>
						<a href="profile.html">
							<i class="fa fa-user text-success"></i>
						</a>
					</li>
					<li>
						<a href="invoice.html">
							<i class="fa fa-file-pdf-o text-warning"></i>
						</a>
					</li>
					<li>
						<a href="components.html">
							<i class="fa fa-sliders text-info"></i>
						</a>
					</li>
					<li>
						<a href="login.html">
							<i class="fa fa-sign-out text-danger"></i>
						</a>
					</li>
				</ul>
			</div>
			<!-- Current User Ends -->

			<!-- Menu start -->
			<div id='menu'>
                    <ul>
                        <li>
                            <a href='index.html'>
                                <i class="fa fa-desktop"></i>
                                <span>仪表盘</span>
                            </a>
                        </li>
                        <li>
                            <a href='team-members.html'>
                                <i class="fa fa-user"></i> 
                                <span>团员管理</span>
                            </a>
                        </li>
                        <li>
                            <a href='new-group.html'>
                                <i class="fa fa-flask"></i> 
                                <span>新建团队</span>
                            </a>
                        </li>
                        <li>
                            <a href='groups.html'>
                                <i class="fa fa-calendar"></i> 
                                <span>团队管理</span>
                            </a>
                        </li>
                        <li>
                            <a href='work-members.html'>
                                <i class="fa fa-github-alt"></i> 
                                <span>员工管理</span>
                            </a>
                        </li>
                        <li class="highlight">
                            <a href='packages.html'>
                                <i class="fa fa-globe"></i> 
                                <span>套餐管理</span>
                                <span class="current-page"></span>
                            </a>
                        </li>
                        <li>
                            <a href='routes.html'>
                                <i class="fa fa-arrows-h"></i> 
                                <span>路线管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="http://182.61.146.234:8069/web?#action=128&model=tour.route&view_type=list&menu_id=96" target="_Blank" style='text-decoration:none;'>
                                <i class="fa fa-pencil fa-fw"></i>
                                <span>报表助手</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- Menu End -->
    
                <div class="modal fade" id="mapInput" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    ×
                                </button>
                                <h4 class="modal-title">
                                    查询城市路线
                                </h4>
                            </div>
                            <div class="modal-body">
                                <form class="form-horizontal" role="form">

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">城市</label>
                                        <div class="col-sm-9" >
                                            <select class="form-control citys" name="city" id="map_city">
                                                <!-- 从后端取到数据 -->
                                                <!-- 如果不选，默认为武汉 -->
                                                <option value="4" id="defaultOption">请选择城市</option>
                                            </select>
                                        </div>
                                    </div>
        
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">
                                    关闭
                                </button>
                                <button type="submit" data-dismiss="modal"  class="btn btn-primary" id="map_city_confirm">
                                    提交
                                </button><span id="tip"> </span>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>

                <!-- Freebies Starts -->
                <div class="freebies">
                    
                    <!--Sidebar Extras-->       
                    <div class="sidebar-addons">
                        <ul class="views">
                            <li>
                                <a href='city.html'>
                                    <i class="fa fa-circle-o text-success"></i>
                                    <div class="details">
                                        <p>城市信息</p>
                                    </div>
                                </a>
                                
                                <!--<span class="label label-success">8</span>-->
                            </li>
                            <li>
                                <a href='sights.html'>
                                    <i class="fa fa-circle-o text-info"></i>
                                    <div class="details">
                                        <p>景点信息</p>
                                    </div>
                                </a>
                                <!--<span class="label label-info">7</span>-->
                            </li> 
                            <li>
                                <a href='#' data-toggle="modal" data-target="#mapInput">
                                    <i class="fa fa-circle-o text-danger"></i>
                                    <div class="details">
                                        <p>地图信息</p>
                                    </div>
                                </a>
                                <!--<span class="label label-danger">4</span>-->
                            </li>
                        </ul>
                    </div>

                </div>
			<!-- Freebies Starts -->

		</aside>
		<!-- Left sidebar ends -->

		<!-- Dashboard Wrapper starts -->
		<div class="dashboard-wrapper">

			<!-- Top Bar starts -->
			<div class="top-bar">
				<div class="page-title">
					套餐信息
				</div>
				<ul class="stats hidden-xs">
					<li>
						<div class="stats-block hidden-sm hidden-xs">
							<span id="downloads_graph"></span>
						</div>
						<div class="stats-details">
							<!--<h4>$<span id="today_income">580</span> <i class="fa fa-chevron-up up"></i></h4>
							<h5>Today's Income</h5>-->
						</div>
					</li>
					<li>
						<div class="stats-block hidden-sm hidden-xs">
							<span id="users_online_graph"></span>
						</div>
						<div class="stats-details">
							<!--<h4>$<span id="today_expenses">235</span> <i class="fa fa-chevron-down down"></i></h4>
							<h5>Today's Expenses</h5>-->
						</div>
					</li>
				</ul>
			</div>
			<!-- Top Bar ends -->

			<!-- Main Container starts -->
			<div class="main-container">

				<!-- Container fluid Starts -->
				<div class="container-fluid">
					
					<!-- Spacer Starts -->
					<div class="spacer">

						<!-- Row start -->
						<div class="row">

                            <div class="col-md-12 col-sm-12 col-xs-12">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <div class="panel-title" style="height: 50px;">
                                            <h4 style="float:left;">套餐管理</h4>
                                            <div class="btn-group col-lg-3 col-lg-offset-8" role="group" aria-label="...">
                                                <button type="button" id="detail" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#detailPackageModal">详情</button>
                                                <button type="button" id="add" class="btn btn-sm btn-info" data-toggle="modal" data-target="#addPackageModal">新建</button>
                                                <button type="button" id="update"  class="btn btn-sm btn-success" data-toggle="modal" data-target="#updatePackageModal">更新</button>
                                                <button type="button" id="del"  class="btn btn-sm btn-danger">删除</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel-body">
                                        <table id="example" class="cell-border display table" cellspacing="0" width="100%">
                                            <thead>
                                                <tr>
                                                    <th>索引</th>
                                                    <th>套餐id</th>
                                                    <th>套餐名</th>
                                                    <th>套餐类型</th>
                                                    <th>所在城市</th>
                                                    <th>费用</th>
                                                    <th>持续时间</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>

						</div>
						<!-- Row end -->

					</div>
					<!-- Spacer Ends -->

				</div>
				<!-- Container fluid ends -->

			</div>
			<!-- Main Container ends -->

			<!-- Right sidebar starts -->
			<div class="right-sidebar">

				<!-- Addons starts -->
				<div class="add-on clearfix">
					<div class="add-on-wrapper">
						<h5>Workers</h5>
						<ul class="blog-gallery clearfix">
							<li>
								<img src="img/user1.jpg" alt="User">
							</li>
							<li>
								<img src="img/user2.jpg" alt="User">
							</li>
							<li>
								<img src="img/user3.jpg" alt="User">
							</li>
							<li>
								<img src="img/user4.jpg" alt="User">
							</li>
							<li>
								<img src="img/user5.jpg" alt="User">
							</li>
							<li>
								<img src="img/user6.jpg" alt="User">
							</li>
							<li>
								<img src="img/user7.jpg" alt="User">
							</li>
							<li>
								<img src="img/user8.jpg" alt="User">
							</li>
							<li>
								<img src="img/user3.jpg" alt="User">
							</li>
							<li>
								<img src="img/user9.jpg" alt="User">
							</li>
						</ul>
					</div>
				</div>
				<!-- Addons ends -->

				

			</div>
			<!-- Right sidebar ends -->

			<!-- Footer starts -->
			<footer>
				Copyright Everest Ruiyi 2019.
			</footer>
			<!-- Footer ends -->
			<!-- Footer ends -->

		</div>
		<!-- Dashboard Wrapper ends -->

        <div class="modal fade" id="detailPackageModal" tabindex="-1" role="dialog" aria-labelledby="DetailLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content" style="width:150%">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            ×
                        </button>
                        <h4 class="modal-title" id="DetailLabel">
                            套餐详情
                        </h4>
                    </div>
                    <div class="modal-body" id="detail-body">
                        <!-- <div class="form-group"> -->
                            <div id="detail_route_ul" class="col-sm-9 list-group">
                                <!-- <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li> -->
                            </div>
                        <!-- </div> -->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            关闭
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

		<!-- 添加弹出表单 -->
		<div class="modal fade" id="addPackageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            ×
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            添加套餐信息
                        </h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label class="col-sm-3 control-label" >套餐名</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="add_package_name"
                                           placeholder="请输入套餐名称">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">套餐种类</label>
                                <div class="col-sm-9">
                                    <select class="form-control" id="add_package_kind">
                                        <option value="1">普通套餐</option>
                                        <option value="2">豪华套餐</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">城市</label>
                                <div class="col-sm-9" >
                                    <select class="form-control citys" id="add_city">
                                        <!-- 从后端取到数据 -->
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">费用</label>
                                <div class="col-sm-9">
                                    <input type="number" class="form-control" id="add_cost"
                                           placeholder="请输入费用">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">套餐时间</label>
                                <div class="col-sm-9">
                                    <input type="number" class="form-control" id="add_duration"
                                           placeholder="请输入套餐时间">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">路线选择</label>
                                <div class="col-sm-9">
                                    <div class="dropdown">
                                        <button class="btn btn-default dropdown-toggle" value=0 type="button" id="add_route_menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            路线选择
                                          <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu routes" id="add_routes" aria-labelledby="add_route_menu">
                                          <!-- <li><a href="#">Separated link</a></li> -->
                                        </ul>
                                        <button type="button" class="btn btn-info col-sm-offset-6" id="btn_add_route">添加</button>
                                      </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div id="add_route_ul" class="col-sm-9 col-sm-offset-2">

                                </div>
                            </div>

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            关闭
                        </button>
                        <button type="submit" data-dismiss="modal" class="btn btn-primary" id="add_confirm">
                            提交
                        </button><span id="tip"> </span>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

        <!-- 添加修改表单 -->
		<div class="modal fade" id="updatePackageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            ×
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            修改套餐信息
                        </h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">

                            <div class="form-group" style="display: none">
                                <label class="col-sm-3 control-label" >套餐ID</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="package_id">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label" >套餐名</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="update_package_name"
                                           placeholder="请输入套餐名称">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">套餐种类</label>
                                <div class="col-sm-9">
                                    <select class="form-control" id="update_package_kind">
                                        <option value="1">普通套餐</option>
                                        <option value="2">豪华套餐</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">城市</label>
                                <div class="col-sm-9">
                                    <select class="form-control citys" id="update_city">
                                        <!-- 从后端取到数据 -->
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">费用</label>
                                <div class="col-sm-9">
                                    <input type="number" class="form-control" id="update_cost"
                                           placeholder="请输入费用">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">套餐时间</label>
                                <div class="col-sm-9">
                                    <input type="number" class="form-control" id="update_duration"
                                           placeholder="请输入套餐时间">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">路线选择</label>
                                <div class="col-sm-9">
                                    <div class="dropdown">
                                        <button class="btn btn-default dropdown-toggle" value=0 type="button" id="update_route_menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            路线选择
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu routes" id="update_routes" aria-labelledby="update_route_menu">
                                            <!-- <li role="separator" 修改class="divider"></li> -->
                                        </ul>
                                        <button type="button" id="btn_update_route" class="btn btn-info col-sm-offset-6" id="0">添加</button>
                                        </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div id="update_route_ul" class="col-sm-9 col-sm-offset-2">

                                </div>
                            </div>

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            关闭
                        </button>
                        <button type="submit" data-dismiss="modal" class="btn btn-primary" id="update_confirm">
                            提交
                        </button><span id="tip"> </span>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>


		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="js/jquery.js"></script>

		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="js/bootstrap.min.js"></script>

		<!-- Sparkline graphs -->
		<script src="js/sparkline.js"></script>

		<!-- jquery ScrollUp JS -->
        <script src="js/scrollup//jquery.scrollUp.js"></script>

        <script src="js/jquery.dataTables.min.js"></script>
        <script src="js/tables.js"></script>

		<!-- Custom Index -->
        <script src="js/custom.js"></script>

        <!-- <script src="js/transfer.js"></script> -->
        <script type="text/javascript">
            var add_route = [];
            var update_route = [];
            var detail_route = [];
            var data = [];
            var table = new Object();
            $(function() {
                $.ajax({
                    url: webPath + 'package/list',
                    type: 'GET',
                    async: false,
                    success(res) {
                        data = res.data;
                        return res.data;
                    }
                })
                // 表格初始化
                var config = {
                    "data": data,
                    "columns":[
                        {
                            data: null,
                            width: "40px"
                        },{
                            data: "id",
                            visible: false
                        },{
                            data: "name"
                        },{
                            data: "kind",
                            render: function(data, type, row, meta) {
                                if (data != 1 && data != 2) {
                                    return "未知"
                                }
                                return data == 1? "普通套餐":"豪华套餐";
                            }
                        }, {
                            data: "city",
                            render: function(data, type, row, meta) {
                                return data.name;
                                // console.log(data);
                                // console.log(data.name);
                                // return data.name;
                            }
                        }, {
                            data: "cost",
                            render: function(data, type, row, meta) {
                                return '￥' + data;
                            }
                        }, {
                            data: "duration",
                            render: function(data, type, row, meta) {
                                return data + "天";
                            }
                        }
                    ]
                };
                table = init_table(config);
                set_align(0, 'center')
                set_align(1, 'center')

                // 获取城市
                var citys = $('.citys');
                $.ajax({
                    url: webPath+"city/list",
                    type: "get",
                    success: function(res){
                        result = res.data;
                        for(var i=0; i<result.length; i++){
                            var option = document.createElement('option');
                            option.setAttribute("value",result[i].id);
                            option.innerText = result[i].name;
                            $('.citys').append(option);
                        }

                    },
                    error: function (xhr) {
                        alert(xhr.status);
                    }
                });

                $('#map_city_confirm').click(function(){
                    var cityId = $('#map_city').val()
                    // console.log('./map.html?cityId=' + cityId);
                    window.location.href = './map.html?cityId=' + cityId;
                });

                // var ul = $('#add_routes');
                var ul = $('.routes');

                // 获取路线信息
                $.ajax({
                    url: webPath + 'route/list',
                    type: 'GET',
                    success(res) {
                        if(res.code == 0) {
                            var lis = res.data;
                            for(var i = 0;i < lis.length;i++) {
                                var li = $("<li/>", {
                                    value: lis[i].id
                                });
                                var a = $("<a/>", {
                                    text: lis[i].routeName,
                                    href: 'javascript:void(false)'
                                })
                                li.append(a);
                                ul.append(li);
                            }
                        }
                    }
                });

                $('#btn_add_route').click(function() {
                    var text = $('#add_route_menu').text();
                    var value = $('#add_route_menu').attr('value');
                    if (value == 0) {
                        // 如果未选中，不能添加
                        return;
                    }
                    if (add_route.indexOf(value) != -1) {
                        // 如果路线选择中已经添加了
                        return;
                    }

                    var msg = getAlertDiv(text, value);
                    $('#add_route_ul').append(msg);
                    // 添加routeId到数组
                    add_route.push(value);
                });

                $('#btn_update_route').click(function() {
                    var text = $('#update_route_menu').text();
                    var value = $('#update_route_menu').attr('value');
                    if (value == 0) {
                        // 如果未选中，不能添加
                        return;
                    }
                    if (update_route.indexOf(value) != -1) {
                        // 如果路线选择中已经添加了
                        return;
                    }

                    var msg = getAlertDiv(text, value);
                    $('#update_route_ul').append(msg);
                    // 添加routeId到数组
                    update_route.push(value);
                })

                function getAlertDiv(text, value) {
                    var msg = $('<div/>', {
                        class: 'alert alert-info alert-dismissable col-sm-5',
                        value: value,
                        role: 'alert'
                    });
                    var btn = $('<button/>', {
                        'type': 'button',
                        'class': 'close',
                        'data-dismiss': 'alert',
                        'aria-hidden': 'true',
                        'text': 'x'
                    });
                    msg.append(btn);
                    msg.append(text);
                    return msg;
                }

                $('#add_route_ul').on('click','div button', function(event){
                    var target = $(event.target);
                    var index = add_route.indexOf(target.parent().attr('value'));
                    // 删除route的ID
                    add_route.splice(index,1);
                });

                $('#update_route_ul').on('click', 'div button', function(event){
                    var target = $(event.target);
                    var index = update_route.indexOf(target.parent().attr('value'));
                    // 删除route的ID
                    update_route.splice(index,1);
                })

                $("#add_routes").on("click","li",function(event){
                    var target = $(event.target);
                    // console.log(target.text());
                    // console.log(target.parent().attr('value'));
                    $('#add_route_menu').text(target.text());
                    $('#add_route_menu').attr('value',(target.parent().attr('value')));
                });

                $('#update_routes').on("click","li",function(event){
                    var target = $(event.target);
                    // console.log(target);
                    $('#update_route_menu').text(target.text());
                    $('#update_route_menu').attr('value',(target.parent().attr('value')));
                });

                // TODO： 增加模态框状态切换，禁止弹出
                $('#detail').click(function(){
                    var detail = $('#detail');

                    detail.attr('data-toggle', 'modal');
                    detail.attr('data-target', '#detailPackageModal');

                    var rows = table.rows('.selected').data();
                    var data_info = rows[0];

                    var record = rows.length;

                    if(record != 1) {
                        alert('请选中一条数据！');
                        detail.removeAttr('data-toggle');
                        detail.removeAttr('data-target');
                        return;
                    }
                    var id = data_info.id;

                    $.ajax({
                        url: webPath + 'package/detail',
                        type: 'POST',
                        data: 'packageId='+id,
                        success(res) {
                            if(res.code == 0) {
                                var res_routes = res.data.routes;
                                for(var i = 0;i < res_routes.length;i++) {
                                    // 把routeId存入detail_route
                                    var routeId = res_routes[i].id;
                                    var routeName = res_routes[i].routeName;
                                    var sights = res_routes[i].sights;
                                    // 添加 routeId 到更新数组
                                    var msg = $('<a/>', {
                                        "href": '#',
                                        "class": "list-group-item list-group-item-info",
                                        "text": routeName
                                    });
                                    var sight = '';
                                    for(var j = 0;j < sights.length;j++){
                                        if(j != sights.length-1) {
                                            sight += sights[j].nameSight + ' → ';
                                        } else{
                                            sight += sights[j].nameSight;
                                        }
                                    }
                                    // TODO 添加空格，修改景点箭头
                                    var space = '';
                                    if(routeName.length < 20){
                                        for(var k = 0;k < 20 - routeName.length;k++) {
                                            space += '&nbsp;'
                                        }
                                    }
                                    
                                    msg.html(routeName + space + sight);
                                    $('#detail_route_ul').append(msg);
                                }
                                var height = $('#detail_route_ul').height();
                                $('#detail-body').css("height", height + 25);
                            }
                        }
                    });

                });


                $('#add_confirm').click(function(){
                    var packageName = $('#add_package_name').val();
                    var packageKind = $('#add_package_kind').val();
                    var cityId = $('#add_city').val();
                    var cityName = $('#add_city [value='+cityId+']').text();
                    var cost = $('#add_cost').val();
                    var duration = $('#add_duration').val();
                    var routes = [];

                    for(var i = 0;i < add_route.length;i++) {
                        routes.push({"id": add_route[i]});
                    }

                    var package = {
                        "name": packageName,
                        "kind": packageKind,
                        "cityId": cityId,
                        "cost": cost,
                        "duration": duration,
                        "routes": routes
                    }

                    $.ajax({
                        url: webPath + 'package/add',
                        type: 'POST',
                        data: JSON.stringify(package),
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        success(res) {
                            if (res.code == 0) {
                                // 返回自增主键
                                var id = res.data;
                                var city = {"id": cityId, "name": cityName};
                                package['id'] = id;
                                package['city'] = city;
                                table.row.add(package).draw(false);
                            }
                        }
                    });

                    add_route = [];
                });

                $('#update').click(function() {
                    $('#update_route_ul').empty();

                    update_route = [];
                    var update = $('#update');

                    update.attr('data-toggle','modal');
                    update.attr('data-target','#updatePackageModal');

                    var rows = table.rows('.selected').data();
                    var data_info = rows[0];

                    var record = rows.length;

                    if(record != 1) {
                        alert('请选中一条数据！');
                        update.removeAttr('data-toggle');
                        update.removeAttr('data-target');
                        return;
                    }

                    var id = data_info['id'];
                    var name = data_info['name'];
                    var kind = data_info['kind'];
                    var cityId = data_info['city'].id;
                    var cityName = data_info['city'].name;
                    var cost = data_info['cost'];
                    var duration = data_info['duration'];

                    $('#package_id').val(id);
                    $('#update_package_name').val(name);
                    $('#update_package_name').val(name);
                    $('#update_package_kind').val(kind);
                    $('#update_city').val(cityId);
                    $('#update_cost').val(cost);
                    $('#update_duration').val(duration);

                    $.ajax({
                        url: webPath + 'package/detail',
                        type: 'POST',
                        data: 'packageId='+id,
                        success(res) {
                            if(res.code == 0) {
                                var res_routes = res.data.routes;
                                for(var i = 0;i < res_routes.length;i++) {
                                    // 把routeId存入update_route
                                    var routeId = res_routes[i].id;
                                    var routeName = res_routes[i].routeName;
                                    // 添加 routeId 到更新数组
                                    update_route.push(routeId);

                                    var msg = getAlertDiv(routeName, routeId);
                                    $('#update_route_ul').append(msg);
                                }
                            }
                        }
                    });
                });

                $('#update_confirm').click(function(){
                    var id = $('#package_id').val();
                    var name = $('#update_package_name').val();
                    var kind = $('#update_package_kind').val();
                    var cityId = $('#update_city').val();
                    var cost = $('#update_cost').val();
                    var duration = $('#update_duration').val();

                    var cityName = $("#update_city [value="+cityId+"]").text();
                    var city = { "id": cityId, "name": cityName }

                    var routes = [];
                    for(var i = 0;i < update_route.length;i++) {
                        routes.push({"id": update_route[i]});
                    }

                    var package = {
                        "id": id,
                        "name": name,
                        "kind": kind,
                        "cityId": cityId,
                        "cost": cost,
                        "duration": duration,
                        "routes": routes
                    }
                    console.log(package);

                    $.ajax({
                        url: webPath + 'package/update',
                        type: 'POST',
                        data: JSON.stringify(package),
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        success(res) {
                            if (res.code == 0) {
                                package['city'] = city;
                                table.row('.selected').data(package).draw(false);
                            }
                        }
                    });

                });

                $('#del').click(function(){
                    var rows = table.rows('.selected').data();
                    var record = rows.length;
                    if(record == 0) {
                        alert('请选中一条记录！');
                    } else if (record != 1) {
                        alert('您选中了多条记录！');
                    } else {
                        var del_info = confirm("确定删除吗？");
                        if(del_info == true) {
                            $.ajax({
                                url: webPath + 'package/del',
                                type: 'POST',
                                data: 'packageId='+rows[0].id,
                                success(res) {
                                    if(res.code == 0) {
                                        table.rows('.selected').remove().draw( false );
                                    } else {
                                        alert('删除失败！服务器繁忙')
                                    }
                                }
                            });
                        }
                    }
                });

            })

		</script>
	</body>
</html>